<template>
	<div class="content">
		<el-form  size="small"  ref="ruleFormRef" :rules="rules" class="userInfoContent" :model="form" label-width="auto" style="max-width: 600px">
			<el-form-item label="上级菜单" prop="parentId">
			  <el-tree-select v-model="form.parentId"
			  :data="data" check-strictly :render-after-expand="false">
			  </el-tree-select>
			</el-form-item>
			<el-form-item label="菜单类型" prop="menuType">
			  <el-radio-group v-model="form.menuType">
			    <el-radio value="0">目录</el-radio>
			    <el-radio value="1">菜单</el-radio>
				<el-radio value="2">按钮</el-radio>
			  </el-radio-group>
			</el-form-item>
			<el-form-item label="图标" prop="menuIcon"  v-if="form.menuType === '0' | form.menuType === '1'">
			  <IconPicker v-model="form.menuIcon">
			  </IconPicker>
			</el-form-item>
			<el-row :gutter="20">
				<el-col span="12">
					<el-form-item label="菜单名称" prop="menuName">
					  <el-input v-model="form.menuName"  autofocus/>
					</el-form-item>
				</el-col>
				<el-col  span="12">
					<el-form-item label="显示排序" prop="sort">
					  <el-input v-model="form.sort" type="number" min="0"/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row  :gutter="20" style="justify-content: space-between;" v-if="form.menuType === '0' | form.menuType === '1'">
				<el-col span="12">
					<el-form-item label="是否外链" prop="link">
					   <el-switch v-model="form.link" inactive-value="0" active-value="1"/>
					</el-form-item>
				</el-col>
				<el-col  span="12">
					<el-form-item label="路由地址" prop="menuRoute">
					  <el-input v-model="form.menuRoute" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col span="12"  v-if="form.menuType === '1'">
					<el-form-item label="组件路径" prop="menuPath">
					  <el-input v-model="form.menuPath"/>
					</el-form-item>
				</el-col>
				<el-col span="12" v-if="form.menuType === '2' | form.menuType === '1'">
					<el-form-item label="权限标识" prop="permissionCode">
					  <el-input v-model="form.permissionCode"/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" v-if="form.menuType === '1'">
				<el-col span="12">
					<el-form-item label="路由参数" prop="routeParam">
					  <el-input v-model="form.routeParam"/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row  gutter="205">
				<el-col  span="12"  v-if="form.menuType === '0' | form.menuType === '1'">
					<el-form-item label="显示状态" prop="showStatus">
					  <el-switch v-model="form.showStatus" active-value="1" inactive-value="0" />
					</el-form-item>
				</el-col>
				<el-col  span="12">
					<el-form-item label="菜单状态" prop="menuStatus">
					  <el-switch v-model="form.menuStatus"  active-value="1" inactive-value="0"/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="备注" prop="remark">
			  <el-input v-model="form.remark" type="textarea" />
			</el-form-item>
		</el-form>
	</div>
	<div>
    <el-button  size="small"  plain icon="Edit"  style="margin-left:180px;border-color: white;margin-right:20px;" type="primary" @click="onSubmit(ruleFormRef)">保存</el-button>
    <el-button   size="small"  plain icon="Refresh"  style="color: darkgray;margin-right:20px;"  @click="resetForm(ruleFormRef)" >重置</el-button>
    <el-button  size="small"  plain type="info"  @click="close" >取消</el-button>
  </div>
</template>

<script lang="ts" setup>
	import { reactive,ref, defineProps,toRefs,onMounted,watchEffect} from 'vue'
	import type { FormInstance, FormRules } from 'element-plus'
	import {ElMessage} from 'element-plus'
	import IconPicker from '@/components/IconSelect/index2.vue'
	import {update,treelist,info} from '@/api/menu.ts'
	
	const props = defineProps(['menuId'])
	
	const emit = defineEmits(['closeEditMenuForm','success'])
	
	const icon = ref<string>('');
	const data = ref([{value:0,label:'顶级菜单',children:[]}])
	onMounted(()=>{
		treelist().then((res)=>{
			if(res.code === 200){
				data.value[0].children = res.data
			}
		})
	})
	interface RuleForm {
	  id:number,	
	  remark:string,
	  parentId:number,
	  menuType:string,
	  menuIcon:string,
	  menuName:string,
	  sort:string,
	  link:string,
	  menuRoute:string,
	  menuPath:string,
	  permissionCode:string,
	  routeParam:string,
	  showStatus:string,
	  menuStatus:string
	}
	const ruleFormRef = ref<FormInstance>()
	const form = reactive<RuleForm>({
	  id:0,
	  remark:'',
	  parentId:0,
	  menuType:'0',
	  menuIcon:'',
	  menuName:'',
	  sort:'0',
	  link:'0',
	  menuRoute:'',
	  menuPath:'',
	  permissionCode:'',
	  routeParam:'',
	  showStatus:'1',
	  menuStatus:'1'
	})
	
	watchEffect(()=>{
		if(props.menuId){
			info(props.menuId).then((res)=>{
				if(res.code === 200){
					form.id=res.data.id
					form.remark=res.data.remark
					form.parentId=res.data.parentId
					form.menuType=res.data.menuType
					form.menuIcon=res.data.menuIcon
					form.menuName=res.data.menuName
					form.sort=res.data.sort
					form.link=res.data.link
					form.menuRoute=res.data.menuRoute
					form.menuPath=res.data.menuPath
					form.permissionCode=res.data.permissionCode
					form.routeParam=res.data.routeParam
					form.showStatus=res.data.showStatus
					form.menuStatus=res.data.menuStatus
				}
			})
		}
	})
	
	const rules = reactive<FormRules<RuleForm>>({
		menuName:[{required:true,message:'菜单名称不能为空',trigger:'blur'}],
		sort:[{required:true,message:'排序不能为空',trigger:'blur'}],
		menuRoute:[{required:true,message:'路由地址不能为空',trigger:'blur'}],
	})
	
	
	const onSubmit = (formEl: FormInstance | undefined) => {
	  if (!formEl) return
	  formEl.validate(async(valid, fields) => {
	    if (valid) {
	      const {code}=await update(form)
	      if(code === 200){
			  ElMessage({
				  type:'success',
				  message:'保存成功'
			  })
			  emit('success')
	      }
	    } else {
	      console.log('error submit!', fields)
	    }
	  })
	}
	
	const resetForm = (formEl: FormInstance | undefined) => {
	  if (!formEl) return
	  formEl.resetFields()
	}
	const close = ()=>{
		emit('closeEditMenuForm')
	}
</script>

<style scoped>
	.content{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.userInfoContent{
		/* background-color: red; */
	}
</style>